<template>
  <div class="analysis-container">
    <div class="resource-title">资源分析</div>
    <div class="analysis-base">
      <div class="resource-top chart1">
        <div class="list-box">
             <div class="label-box">
              <router-link v-for="(item,index) in chart1Data" :key="index" :to="item.link">{{ item.name }}</router-link>
            </div>
        <div class="base">
            <div class="item" v-for="(item,index) in chart1Data" :key="index">
            <div class="left">
              <span>{{ item.defineNum }}</span>
            </div>
            <div class="right">
              <span>{{ item.useNum }}</span>
            </div>
          </div>
        </div>

          <div class="center-line"></div>

          <div class="title-box">
            <span>定义数量</span>
            <span>在用数量</span>
          </div>

        </div>

      </div>

      <div class="resource-top Resource-zbtop">
        <div class="system-title">指标体系</div>
        <div class="system-main">
          <div class="left">
            <div class="left-item" v-for="i in indexSystemArr.length" :key="i">
              <div class="before"></div>
              <div class="after"></div>
            </div>
          </div>
          <div class="right">
            <div class="right-item" v-for="(item,index) in indexSystemArr" :key="index">
              <i></i>{{numTextArr[index]}}级分类<span>{{item}}</span>个
            </div>
          </div>
        </div>
      </div>

      <div class="resource-top" id="indicators"></div>
      <div class="resource-top" id="dimensions"></div>
    </div>
    <div class="analysis-title">运行分析</div>
    <div class="Resource-base">
      <div class="Resource-bottom">
        <div class="Interface-title">
          <div class="visitstitle">接口访问量</div>
          <div class="select-btn">
            <select
              v-model="selectValue"
              @change="handleSelect"
            ><option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </option
            ></select></div>
        </div>
        <div class="Interface-content" id="Interface"></div>
      </div>
      <div class="Resource-bottom">
        <div class="Interface-title">
          <div class="visitstitle">模型数据固化执行次数</div>
          <div class="select-btn">
            <select
              v-model="selectModelValue"
              @change="handleModelSelect"
            ><option
              v-for="(item, index) in Modeloptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </option
            ></select></div>
        </div>
        <div class="Interface-content" id="Modal"></div>
      </div>
    </div>

     <div class="analysis-title" style="margin-top:20px">指标专题</div>
     <div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:false, y: 460}"
          bordered
          rowKey="id"
          :pagination="false"
          :columns="columns"
          :dataSource="tableData"
          class="j-table-force-nowrap"
        >
          <template slot="sourceCount" slot-scope="text, record">
            <a-button type="link" @click="record.sourceCount !== 0 && showDialog(record.id, 'source')">{{record.sourceCount}}</a-button>
          </template>
          <template slot="indexCount" slot-scope="text, record">
            <a-button type="link" @click="record.indexCount !== 0 && showDialog(record.id, 'index')">{{record.indexCount}}</a-button>
          </template>
          <template slot="topicCount" slot-scope="text, record">
            <a-button type="link" @click="record.topicCount !== 0 && showDialog(record.id, 'topic')">{{record.topicCount}}</a-button>
          </template>
          <template slot="serviceCount" slot-scope="text, record">
            <a-button type="link" @click="record.serviceCount !== 0 && showDialog(record.id, 'service')">{{record.serviceCount}}</a-button>
          </template>
        </a-table>
     </div>

     <TopicListDialog ref="topicListDialog" v-if="dialogFlag" @cancel="dialogFlag = false"/>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts'
import $ from 'jquery'
window.$ = $
import TopicListDialog from './components/TopicListDialog'
export default {
  name: 'Analysis',
  components: {
    TopicListDialog
  },
  data() {
    return {
      // 定义数量和在用数量数据
      chart1Data: [
        {
          name: '模型(接口)数量',
          defineNum: 0,
          useNum: 0,
          link: '/modelManage/modeling'
        },
        {
          name: '模型固化方案',
          defineNum: 0,
          useNum: 0,
          link: '/modelManage/write'
        }
        // {
        //   name: '评价体系',
        //   defineNum: 0,
        //   useNum: 0,
        //   link: '/modelManage/evaluation'
        // }
      ],
      // 监听尺寸变化对象
      resizeObserver: null,
      lineAreaObj: null,
      linedimensions: null,
      caseChart: null,
      lineChart: null,
      selectValue: 'day',
      selectModelValue: 'Modelday',
      options: [
        {
          value: 'day',
          label: '日粒度'
        }, {
          value: 'month',
          label: '月粒度'
        }, {
          value: 'year',
          label: '年粒度'
        }],
      Modeloptions: [
        {
          value: 'Modelday',
          label: '日粒度'
        }, {
          value: 'Modelmonth',
          label: '月粒度'
        }, {
          value: 'Modelyear',
          label: '年粒度'
        }],
      // EmployDataZoomStartId: 0,
      // EmployDataZoomEndId: 3,
      // EmployChartTimer: 0,
      // time: 5000,
      // 指标体系数据
      indexSystemArr: [],
      indexSystemColorArr: ['#3d84f8', '#03e0d8', '#ffb288', '#8078f9', '#fbd437', '#b894f6'],
      numTextArr: ['一', '二', '三', '四', '五', '六'],
      tableData: [],
      // 表头
      columns: [
        {
          title: '指标专题',
          align: 'center',
          dataIndex: 'catalogName',
          ellipsis: true
        },
        {
          title: '关联数据源数',
          align: 'center',
          dataIndex: 'sourceCount',
          scopedSlots: { customRender: 'sourceCount' },
          ellipsis: true
        },
        {
          title: '创建指标数量',
          align: 'center',
          dataIndex: 'indexCount',
          scopedSlots: { customRender: 'indexCount' },
          ellipsis: true
        },
        {
          title: '创建模型数量',
          align: 'center',
          dataIndex: 'topicCount',
          scopedSlots: { customRender: 'topicCount' },
          ellipsis: true
        },
        {
          title: '创建接口数量',
          align: 'center',
          dataIndex: 'serviceCount',
          scopedSlots: { customRender: 'serviceCount' },
          ellipsis: true
        }
      ],
      dialogFlag: false
    }
  },
  mounted() {
    this.initResizeObserver()
  },
  activated() {
    this.reloadData()
  },
  methods: {
    reloadData() {
      this.getTableData()
      this.systemlistdata()
      this.handStaffdata()
      this.handdimensionsdata()
      this.chartdatalist()
      this.handleSelect()
      this.handleModelSelect()
    },
    // 获取指标专题列表数据
    getTableData() {
      getAction('/index/config/catalogCountInfo').then(res => {
        if (res.success) this.tableData = res.result
      })
    },
    // 显示指标专题详情弹窗
    showDialog(id, type) {
      this.dialogFlag = true

      this.$nextTick(() => {
        this.$refs.topicListDialog.show(id, type)
      })
    },
    async chartdatalist() {
      const res1 = await getAction('/index/scSituationIndexTopic/count', {})
      this.chart1Data[0].defineNum = res1.result.def
      this.chart1Data[0].useNum = res1.result.inUse

      const res2 = await getAction('/index/scSituationIndexTopicWrite/count', {})
      this.chart1Data[1].defineNum = res2.result.def
      this.chart1Data[1].useNum = res2.result.inUse

      // const res3 = await getAction('/eval/scSituationEval/count', {})
      // this.chart1Data[2].defineNum = res3.result.def
      // this.chart1Data[2].useNum = res3.result.inUse

      this.initChart1()
    },
    systemlistdata() {
      getAction('/index/scSituationIndexCatalog/count', {}).then(res => {
        if (res.success) {
          // 最多支持六级
          this.indexSystemArr = res.result.count.splice(0, 6)

          this.$nextTick(() => {
            this.setIndexSystemDomStyle()
          })
        }
      })
    },
    // 设置指标体系dom样式
    setIndexSystemDomStyle() {
      const leftItemHeight = $('.Resource-zbtop .system-main .left-item').height()
      $('.Resource-zbtop .system-main .left-item').each((index, ele) => {
        $(ele).css({
          'backgroundColor': this.indexSystemColorArr[index]
        })
        $(ele).children('.before').css({
          'borderBottom': `${leftItemHeight}px solid ${this.indexSystemColorArr[index]}`,
          'borderLeft': `15px solid transparent`
        })
        $(ele).children('.after').css({
          'borderBottom': `${leftItemHeight}px solid ${this.indexSystemColorArr[index]}`,
          'borderRight': `15px solid transparent`
        })

        if (index !== 0) $(ele).width($(ele).prev().width() - 30)
      })

      $('.Resource-zbtop .system-main .right-item').each((index, ele) => {
        $(ele).children('i').css({
          'backgroundColor': this.indexSystemColorArr[index]
        })
      })
    },
    // 初始化chart!数据
    initChart1() {
      let max = 0
      this.chart1Data.map(item => {
        if (item.defineNum > max) max = item.defineNum
        if (item.useNum > max) max = item.useNum
      })
      // 计算宽度百分比
      this.chart1Data.map((item, i) => {
        item.defineWidth = parseInt(item.defineNum / max / 2 * 100) < 10 ? 10 : parseInt(item.defineNum / max / 2 * 100)
        item.useWidth = parseInt(item.useNum / max / 2 * 100) < 10 ? 10 : parseInt(item.useNum / max / 2 * 100)
        $('.resource-top.chart1').find('.item').eq(i).find('.left').css('width', item.defineWidth + '%')
        $('.resource-top.chart1').find('.item').eq(i).find('.right').css('width', item.useWidth + '%')
      })
    },
    // 初始化尺寸变化监听对象
    initResizeObserver() {
      console.log('-=====-----------------------------------------------------------------------------')
      this.resizeObserver = new ResizeObserver(entries => {
        // if (this.lineAreaObj !== null) this.lineAreaObj.resize()
        // if (this.linedimensions !== null) this.linedimensions.resize()
        if (this.caseChart !== null) this.caseChart.resize()
        if (this.lineChart !== null) this.lineChart.resize()
        this.setIndexSystemDomStyle()
      })
      this.resizeObserver.observe(document.getElementById('indicators'))
      this.resizeObserver.observe(document.getElementById('dimensions'))
      this.resizeObserver.observe(document.getElementById('Interface'))
      this.resizeObserver.observe(document.getElementById('Modal'))
    },
    // 定义指标数量
    handStaffdata() {
      getAction('/index/scSituationIndexInfo/countByType', {}).then(res => {
        if (res.success) {
          var data = []
          this.number = 0
          if (res.success) {
            for (var i = 0; i < res.result.length; i++) {
              var item = {
                name: '',
                value: 0
              }
              item.name = res.result[i].configType
              if (item.name == '1') {
                item.name = '数据表创建'
              } else if (item.name == '2') {
                item.name = 'sql创建'
              } else if (item.name == '3') {
                item.name = '指标创建'
              }
              item.value = res.result[i].num
              data.push(item)
              this.number += res.result[i].num
            }
            // this.number = res.result[0].num
            this.handStaff(data.reverse())
          }
        }
      })
    },
    handStaff(data) {
      this.lineAreaObj = echarts.init(document.getElementById('indicators'))
      var colorList = ['#FBD437', '#798BFF', '#35CCCC']
      // var number = 7
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        title: {
          text: '定义指标数量',
          subtext: this.number + '个',
          x: 'center',
          y: 'center',
          textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 14,
            color: '#778CA2',
            fontStyle: 'normal',
            fontWeight: 'normal'
          },
          subtextStyle: { // 副标题文本样式{"color": "#aaa"}
            fontSize: 16,
            color: '#212145',
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        series: [{
          name: '',
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['40%', '65%'],
          itemStyle: {
            normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}}：\n {b|{d}%}',
            // padding: [0, -80],
            rich: {
              a: {
                fontSize: '12px',
                color: '#778CA2',
                fontWeight: 'bold'
              },
              b: {
                fontSize: '16px',
                color: '#212145',
                fontWeight: 'bold',
                padding: [5, 0]
              }
            }
          },
          labelLine: {
            normal: {
              length: 10,
              length2: 15,
              lineStyle: {
                width: 1
              }
            }
          },
          data: data
        }]
      }
      this.lineAreaObj.setOption(option)
    },
    // 维度定义数量
    handdimensionsdata() {
      getAction('/index/scSituationDimensionInfo/countByType', {}).then(res => {
        if (res.success) {
          var data = []
          this.number = 0
          if (res.success) {
            for (var i = 0; i < res.result.length; i++) {
              var item = {
                name: '',
                value: 0
              }
              item.name = res.result[i].dictType
              if (item.name == '0') {
                item.name = '未关联字典'
              } else if (item.name == '1') {
                item.name = '数据字典'
              } else if (item.name == '2') {
                item.name = '分类字典'
              } else if (item.name == '3') {
                item.name = '自定义字典'
              }
              item.value = res.result[i].num
              data.push(item)
              this.number += res.result[i].num
            }
            // this.number = res.result[0].num + res.result[1].num
            this.handdimensions(data.reverse())
          }
        }
      })
    },
    handdimensions(data) {
      this.linedimensions = echarts.init(document.getElementById('dimensions'))
      var colorList = ['#B894F6', '#35CCCC', '#798BFF', '#FBD437']
      // var number = 2
      const dimensionsoption = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        title: {
          text: '维度定义数量',
          subtext: this.number + '个',
          x: 'center',
          y: 'center',
          textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 14,
            color: '#778CA2',
            fontStyle: 'normal',
            fontWeight: 'normal'
          },
          subtextStyle: { // 副标题文本样式{"color": "#aaa"}
            fontSize: 16,
            color: '#212145',
            fontStyle: 'normal',
            fontWeight: 'normal'
          }
        },
        series: [{
          name: '',
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['40%', '65%'],
          itemStyle: {
            normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}}：\n {b|{d}%}',
            // padding: [0, -80],
            rich: {
              a: {
                fontSize: '12px',
                color: '#778CA2',
                fontWeight: 'bold'
              },
              b: {
                fontSize: '16px',
                color: '#212145',
                fontWeight: 'bold',
                padding: [5, 0]
              }
            }
          },
          labelLine: {
            normal: {
              length: 10,
              length2: 25,
              lineStyle: {
                width: 1
              }
            }
          },
          data: data
        }]
      }
      this.linedimensions.setOption(dimensionsoption)
    },
    // 接口访问量
    handleSelect() {
      var xArray = []
      var yArray = []
      const year = new Date().getFullYear()
      const mounth = new Date().getMonth() + 1
      const day = new Date().getDate()
      switch (this.selectValue) {
        case 'day':
          getAction('/topic/data/topicAccessTimes', { dateType: '%Y-%m-%d', endTime: `${year}-${mounth}-${day}`, startTime: '2000-1-1' }).then(res => {
            if (res.success) {
              for (var i = 0; i < res.result.length; i++) {
                xArray.push(res.result[i].dates)
                yArray.push(res.result[i].counts)
              }
              this.xArray = xArray
              this.yArray = yArray
              this.initCaseChart()
            }
          })
          break
        case 'year':
          getAction('/topic/data/topicAccessTimes', { dateType: '%Y', endTime: year, startTime: '2000' }).then(res => {
            if (res.success) {
              for (var i = 0; i < res.result.length; i++) {
                xArray.push(res.result[i].dates)
                yArray.push(res.result[i].counts)
              }
              this.xArray = xArray
              this.yArray = yArray
              this.initCaseChart()
            }
          })
          break
        case 'month':
          getAction('/topic/data/topicAccessTimes', { dateType: '%Y-%m', endTime: `${year}-${mounth}`, startTime: '2000-1' }).then(res => {
            if (res.success) {
              for (var i = 0; i < res.result.length; i++) {
                xArray.push(res.result[i].dates)
                yArray.push(res.result[i].counts)
              }
              this.xArray = xArray
              this.yArray = yArray
              this.initCaseChart()
            }
          })
          break
      }
      this.initCaseChart(this.xArray, this.yArray)
    },
    initCaseChart() {
      const themeEC4 = {
        color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
      }
      if (!this.caseChart) this.caseChart = echarts.init(document.getElementById('Interface'), themeEC4)
      var caseOption = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '13%',
          // right: '5%',
          // width: '90%',
          top: '5%',
          bottom: '10%'
        },
        xAxis: [{
          type: 'category',
          data: this.xArray,
          // 网格线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid', // 默认实线，dashed虚线
              // width: 1,
              color: '#DDD'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#778CA2',
              fontSize: 15
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#999'
            }
          }
        }],
        yAxis: [{
          type: 'value',
          splitNumber: 4,
          // 网格线
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#DDD'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#333'
            }
          },
          nameTextStyle: {
            show: false,
            color: '#999'
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#778CA2',
              fontSize: 15
            }
          },
          splitArea: {
            show: false
          }
        }],
        series: [{
          name: '接口访问量:',
          type: 'line',
          data: this.yArray,
          // showAllSymbol: true,
          // symbol: 'circle',
          // symbolSize: 2,
          lineStyle: {
            normal: {
              width: 8,
              color: {
                type: 'linear',

                colorStops: [{
                  offset: 0,
                  color: '#50E3C2' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#50E3C2' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
              // shadowColor: 'rgba(72,216,191, 0.3)',
              // shadowBlur: 10,
              // shadowOffsetY: 20
            }
          },
          itemStyle: {
            normal: {
              color: '#50E3C2',
              borderWidth: 10,
              /* shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 100, */
              borderColor: '#A9F387'
            }
          },
          smooth: true
        }]
      }
      this.caseChart.setOption(caseOption, true)
    },
    // 模型数据固化执行次数
    handleModelSelect() {
      var ModelxArray = []
      var ModelyArray = []
      var ModelyArray1 = []
      const year = new Date().getFullYear()
      const mounth = new Date().getMonth() + 1
      const day = new Date().getDate()
      switch (this.selectModelValue) {
        case 'Modelyear':
          getAction('/log/scSituationScheduleLog/topicWriteTimes', { dateType: '%Y', endTime: year, startTime: '2000' }).then(res => {
            if (res.success) {
              for (var i = 0; i < res.result.length; i++) {
                ModelxArray.push(res.result[i].dates)
                ModelyArray.push(res.result[i].success)
                ModelyArray1.push(res.result[i].failure)
              }
              this.ModelxArray = ModelxArray
              this.ModelyArray = ModelyArray
              this.ModelyArray1 = ModelyArray1
              this.initEmployChart()
            }
          })
          // this.EmployDataZoomStartId = 0
          // this.EmployDataZoomEndId = 3
          // if (this.lineChart !== null) {
          //   clearInterval(this.EmployChartTimer)
          // }

          break
        case 'Modelmonth':
          getAction('/log/scSituationScheduleLog/topicWriteTimes', { dateType: '%Y-%m', endTime: `${year}-${mounth}`, startTime: '2000-1' }).then(res => {
            if (res.success) {
              for (var i = 0; i < res.result.length; i++) {
                ModelyArray.push(res.result[i].success)
                ModelxArray.push(res.result[i].dates)
                ModelyArray1.push(res.result[i].failure)
              }
              this.ModelxArray = ModelxArray
              this.ModelyArray = ModelyArray
              this.ModelyArray1 = ModelyArray1
              this.initEmployChart()
            }
          })
          // this.EmployDataZoomStartId = 0
          // this.EmployDataZoomEndId = 3
          // if (this.lineChart !== null) {
          //   clearInterval(this.EmployChartTimer)
          // }

          break
        case 'Modelday':
          getAction('/log/scSituationScheduleLog/topicWriteTimes', { dateType: '%Y-%m-%d', endTime: `${year}-${mounth}-${day}`, startTime: '2000-1-1' }).then(res => {
            if (res.success) {
              for (var i = 0; i < res.result.length; i++) {
                ModelxArray.push(res.result[i].dates)
                ModelyArray.push(res.result[i].success)
                ModelyArray1.push(res.result[i].failure)
              }
              this.ModelxArray = ModelxArray
              this.ModelyArray = ModelyArray
              this.ModelyArray1 = ModelyArray1
              this.initEmployChart()
            }
          })
          // this.EmployDataZoomStartId = 0
          // this.EmployDataZoomEndId = 3
          // if (this.lineChart !== null) {
          //   clearInterval(this.EmployChartTimer)
          // }

          break
      }
      // this.EmployChartTimer = setInterval(this.initEmployChart, this.time)
      // this.EmployDataZoomStartId = 0
      // this.EmployDataZoomEndId = 3
    },
    initEmployChart() {
      const themeEC4 = {
        color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
      }
      if (!this.lineChart) this.lineChart = echarts.init(document.getElementById('Modal'), themeEC4)
      var lineOption = {
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        // dataZoom: [{
        //   type: 'slider',
        //   show: false,
        //   startValue: this.EmployDataZoomStartId,
        //   endValue: this.EmployDataZoomEndId,
        //   xAxisIndex: 0
        //   // 当数据为0时最后一个显示竖线问题的解决
        //   // filterMode: 'empty'
        // }],
        grid: {
          left: '13%',
          // width: '90%',
          top: '5%',
          bottom: '10%'
        },
        xAxis: [{
          type: 'category',
          axisLabel: {
            textStyle: {
              color: '#778CA2',
              fontSize: 15
            }
          },
          axisLine: {
            lineStyle: {
              color: '#DDD'
            }
          },
          axisTick: {
            show: false
          },
          // 网格线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid', // 默认实线，dashed虚线
              // width: 1,
              color: '#DDD'
            }
          },
          boundaryGap: false,
          data: this.ModelxArray

        }],

        yAxis: [{
          type: 'value',
          nameTextStyle: {
            fontSize: 20,
            fontWeight: 400,
            color: '#B6D0FF'
          },
          splitLine: {
            lineStyle: {
              type: 'solid',
              color: '#DDD'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DDD'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#778CA2',
              fontSize: 15

            }
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '固化成功',
          type: 'line',
          smooth: true, // 是否平滑
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 2,
          lineStyle: {
            normal: {
              color: '#62EEB0',
              width: 8

            }
          },
          label: {
            show: false,
            position: 'top',
            textStyle: {
              color: '#00b3f4',
              width: 2
            }
          },
          itemStyle: {
            color: '#62EEB0',
            borderColor: '#62EEB0',
            borderWidth: 0
          },
          tooltip: {
            show: true
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(80,227,194,0.2)'
              },
              {
                offset: 1,
                color: 'rgba(80,227,194,0.2)'
              }
              ], false)

            }
          },
          data: this.ModelyArray
        },
        {
          name: '固化失败次数',
          type: 'line',
          smooth: true, // 是否平滑
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 2,
          lineStyle: {
            normal: {
              color: '#216EFC',
              width: 8
            }
          },
          label: {
            show: false,
            position: 'top',
            textStyle: {
              color: '#00ca95'
            }
          },

          itemStyle: {
            color: '#216EFC',
            borderColor: '#216EFC',
            borderWidth: 0

          },
          tooltip: {
            show: true
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(52, 128, 255, 0.2)'
              },
              {
                offset: 1,
                color: 'rgba(33, 110, 252, 0.2)'
              }
              ], false)
            }
          },
          data: this.ModelyArray1
        }
        ]
      }
      this.$nextTick(() => {
        this.lineChart.setOption(lineOption, true)
      })
      // this.EmployDataZoom()
    },
    // EmployDataZoom() {
    //   if (this.selectModelValue === 'Modelyear') {
    //     if (this.EmployDataZoomEndId < this.ModelxArray.length) {
    //       this.EmployDataZoomStartId = this.EmployDataZoomStartId + 1
    //       this.EmployDataZoomEndId = this.EmployDataZoomEndId + 1
    //     } else {
    //       this.EmployDataZoomStartId = 0
    //       this.EmployDataZoomEndId = 3
    //     }
    //   } else if (this.selectModelValue === 'Modelmonth') {
    //     if (this.EmployDataZoomEndId < this.ModelxArray.length) {
    //       this.EmployDataZoomStartId = this.EmployDataZoomStartId + 1
    //       this.EmployDataZoomEndId = this.EmployDataZoomEndId + 1
    //     } else {
    //       this.EmployDataZoomStartId = 0
    //       this.EmployDataZoomEndId = 3
    //     }
    //   } else {
    //     if (this.EmployDataZoomEndId < this.ModelxArray.length) {
    //       this.EmployDataZoomStartId = this.EmployDataZoomStartId + 1
    //       this.EmployDataZoomEndId = this.EmployDataZoomEndId + 1
    //     } else {
    //       this.EmployDataZoomStartId = 0
    //       this.EmployDataZoomEndId = 3
    //     }
    //   }
    // },
    beforedestroy() {
      // clearInterval(this.EmployChartTimer)
    }
  }
}
</script>
<style lang="less" scoped>
.analysis-container {
  width: 100%;
  padding: 8px 8px 0 8px;
  // height: calc(100vh - 55px - 12px - 68px);
  // height: calc(100vh - 59px - 12px - 67px);
  .resource-title{
    width: 100%;
    height: 26px;
    margin-bottom: 20px;
    color: #778CA2;
    font-size: 20px;
    font-weight: 700;
    float: left;
  }
  .analysis-base{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;

    .resource-top{
      width: 24.25%;
      height: 265px;
      padding: 20px;
      background-color: #ffffff;
      margin-bottom: 20px;

       @media screen and (max-width: 1800px){
         width: 49.5%;
       }

      &.chart1 {
        .list-box {
          // padding-top: 20px;
          overflow: hidden;
          position: relative;
           .label-box {
            text-align: center;
            margin: 0 -20px;

            &>a {
              position: relative;
              display: inline-block;
              font-size: 16px;
              color: #538fff;
              padding-left: 13px;
              margin: 0 5px;

              &::before {
                position: absolute;
                content: '';
                width: 10px;
                height: 10px;
                border-radius: 50%;
                left: 0;
                top: 8px;
              }

              &:nth-of-type(1) {
                &::before {
                  background-color: #766ff8;
                }
              }

              &:nth-of-type(2) {
                &::before {
                  background-color: #ffab7f;
                }
              }

              &:nth-of-type(3) {
                &::before {
                  background-color: #03ded5;
                }
              }
            }
          }
          .base{
            margin-top: 30px;
            padding-right: 20px;
          }
          .item {
            clear: both;
            padding-bottom: 48px;
            text-align: center;
            position: relative;

            .left {
              width: 50%;
              height: 16px;
              border-radius: 100px;
              position: absolute;
              right: calc(50% - 10px);
              z-index: 2;

              &>span {
                position: absolute;
                left: 0;
                top: -22px;
                font-size: 14px;
                color: #778CA2;
              }
            }

            .right {
              width: calc(50% + 20px);
              height: 16px;
              border-radius: 100px;
              position: absolute;
              left: 50%;
              z-index: 1;

              &>span {
                position: absolute;
                right: 0;
                top: -22px;
                font-size: 14px;
                color: #778CA2;
              }
            }

            &:nth-of-type(1) {
              .left {
                background: rgb(118, 111, 248);
              }

              .right {
                background: rgba(118, 111, 248, .5);
              }
            }

            &:nth-of-type(2) {
              .left {
                background: rgb(255, 171, 127);
              }

              .right {
                background: rgba(255, 171, 127, .5);
              }
            }

            &:nth-of-type(3) {
              .left {
                background: rgb(3, 222, 213);
              }

              .right {
                background: rgba(3, 222, 213, .5);
              }
            }
          }

          .center-line {
            position: absolute;
            width: 1px;
            height: 138px;
            border-left: 1px dashed #e3e6ea;
            left: 50%;
            top: 41px;
            // top: 10px;
          }

          .title-box {
            clear: both;
            text-align: center;
            margin-bottom: 15px;

            &>span {
              display: inline-block;
              height: 28px;
              line-height: 28px;
              margin: 0 10%;
              background-color: #f1f3f8;
              font-size: 14px;
              color: #778ca2;
              padding: 0 6px;
            }
          }

        }
      }

    }
    .Resource-zbtop {
       .system-title{
          width: 100%;
          color: #778CA2;
          font-size: 16px;
          font-weight: bold;
          // float: left;
        }

        .system-main {
          height: 200px;
          margin-top: 10px;
          overflow: hidden;

          &>.left {
            width: 60%;
            height: 200px;
            float: left;
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;

            &>.left-item {
              width: calc(100% - 40px);
              height:80px;
              text-align:center;
              color:#fff;
              line-height:50px;
              background-color:red;
              position:relative;

              .before {
                position:absolute;
                left:-15px;
                top:0;
                width: 0;
                height: 0;
                border-bottom: 50px solid red;
                border-left: 20px solid transparent;
              }

              .after {
                position:absolute;
                right:-15px;
                top:0;
                width: 0;
                height: 0;
                border-bottom: 50px solid red;
                border-right: 20px solid transparent;
              }
            }
          }

          &>.right {
            width: 40%;
            height: 200px;
            float: left;
             display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;

            .right-item {
              height:80px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #778CA2;
              font-size: 12px;

              &>i {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                margin-right: 10px;
              }

              &>span {
                color: #212145;
                  font-size: 20px;
                  font-weight: bold;
                  padding: 0 10px;
              }
            }
          }
        }
    }
  }
  .Resource-base{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 550px;
    .Resource-bottom{
      width: 49.5%;
      height: 100%;
      background-color: #ffffff;
      .Interface-title{
        width: 100%;
        height: 36px;
        margin: 20px 0 0 20px;
        float: left;
        .visitstitle{
          color: #778CA2;
          font-size: 16px;
          font-weight: bold;
          float: left;
        }
        .select-btn{
            width: 120px;
            height: 30px;
            float: right;
            margin-right: 50px;
            select{
              width: 100%;
              height: 100%;
            }
        }
      }
      .Interface-content{
        width: 100%;
        height: calc(100% - 45px);
        float: left;
      }
    }
  }
  .analysis-title{
    width: 100%;
    height: 26px;
    color: #778CA2;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    float: left;
  }
}
</style>
